// Tabs 标签页


// Base
.nav-pills.nav-tabs-btn {
    @include e-clearfix();
    display: flex;
    justify-content: center;

    .nav-item {
        max-width: 100%;
        min-width: 75px;
        margin: .5rem;
        box-shadow: rgba(69, 65, 78, .06) 0 1px 15px 1px;
        border-radius: .5rem;
        text-align: center;

        .nav-link {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            padding: .85rem .75rem;

            .nav-link-icon {
                display: block;
                padding-bottom: .5rem;

                i {
                    margin: 0;
                    font-size: 1.3rem;
                }
            }

            .nav-link-title {
                display: block;
                font-weight: 500;
            }
        }
    }

    .nav-link {
        border: 0;
        padding: 12px 0;
        font-size: 1rem;
        font-weight: 400;

        @include e-icons-style(font-size, (fontawesome: 1.2rem, lineawesome: 1.3rem, flaticon: 1.4rem) );

        i {
            vertical-align: middle;
            line-height: 0;
            display: inline-block;
            margin-right: .5rem;
        }
    }

    // Card Tabs
    .card-tabs & {
        margin: 0 0 -1px 0;

        &.nav-tabs-btn-2x {
            margin: 0 0 -2px 0;
        }

        .nav-item {
            display: flex;
            align-items: stretch;

            .nav-link {
                display: flex;
                align-items: center;
            }
        }
    }
}

.nav-pills.nav-tabs-btn {
    a.nav-link {
        &.active {
            .nav-link-icon {
                i {
                    color: #fff;
                }
            }

            .nav-link-title {
                color: #fff;
            }
        }

        .nav-link-icon {
            i {
               color: e-base-color(label, 1);
           }
       }

       .nav-link-title {
           color: e-base-color(label, 2);
       }
   }
}


// 移动端模式
@include e-mobile {
    .nav-pills.nav-tabs-btn {
        .nav {
            .nav-item {
                max-width: 100%;
                width: 6.5rem;
                margin: .6rem;

                .nav-link {

                    .nav-link-icon {
                        i {
                            font-size: 1.2rem;
                        }
                    }

                    .nav-link-title {
                       font-size: 1rem;
                    }
                }
            }
        }
    }
}